<template>
    <div class="video" @click="to_detail">
        <div class="left">
            <el-image style="width: 100%;height: 100%;" :src="base_url + item.cover_img"></el-image>
            <div class="shadow"
                style="position: absolute;top:0;width: 100%;height: 100%;background-color: rgba(0,0,0,0.5)">
                <img style="width: 20%;" :src="video_shadow" alt="">
            </div>
        </div>
        <div class="right">
            <div class="title"><span>{{ item.title }}</span></div>
            <div class="times">
                <img :src="timer" alt="">
                <span>{{ item.publish_time }}</span>
            </div>
            <div class="content">
                <span>{{ item.textual }}
                </span>
            </div>
            <div class="e_c_l">
                <div class="eye">
                    <img :src="eye">
                    <span> {{ item.view }}浏览</span>
                </div>
                <div class="eye">
                    <img :src="comment">
                    <span> {{ item.comment }}评论</span>
                </div>
                <div class="eye">
                    <img :src="likes">
                    <span> {{ item.likes.length }}点赞</span>
                </div>
            </div>
        </div>
    </div>
</template>

<script setup lang="ts">
import video_shadow from "@/assets/svg/home/media/video_shadow.svg"
import timer from "@/assets/svg/home/essay/timer.svg"
import eye from "@/assets/svg/home/routine/eye.svg"
import comment from "@/assets/svg/home/routine/comment.svg"
import likes from "@/assets/svg/home/routine/likes.svg"
import { useRouter, useRoute } from "vue-router"
import { add_views_video } from "@/apis/web/WebApi"
const router = useRouter()
const route = useRoute()
const base_url = import.meta.env.VITE_APP_URL
const props = defineProps(['item'])
const to_detail = () => {
    console.log(props.item._id)
    router.push(`/video_detail/${props.item._id}`)
    add_views_video(props.item._id)
}
</script>

<style scoped lang="scss">
.video:hover {
    transform: translateY(-1vw);
}

.video {
    transition: all 0.5s;
    width: 70%;
    background-color: rgba(255, 255, 255, 0.8);
    margin-top: 3vh;
    height: 13vw;
    display: flex;
    border-radius: 10px;
    overflow: hidden;
    box-shadow: 0 0 10px #000;
}

.left {
    position: relative;
    width: 50%;
    height: 100%;



    .shadow {
        display: flex;
        justify-content: center;
        align-items: center;
    }
}

.right {
    width: 50%;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 0.5vw;
    justify-content: space-evenly;

    .title {
        width: 80%;
        text-align: center;
        font-size: 1vw;
        font-weight: bold;

        span {
            overflow: hidden;
            text-overflow: ellipsis;
            display: -webkit-box;
            -webkit-line-clamp: 1;
            -webkit-box-orient: vertical;
        }
    }

    .times {
        width: 100%;
        display: flex;
        align-items: center;
        margin-top: 0.5vw;
        justify-content: center;

        img {
            width: 8%;
        }

        span {
            margin-left: 1vw;
            font-size: 1vw;
        }
    }

    .content {
        margin-top: 0.5vw;
        font-size: 1vw;
        width: 100%;

        span {
            overflow: hidden;
            text-overflow: ellipsis;
            display: -webkit-box;
            -webkit-line-clamp: 4;
            -webkit-box-orient: vertical;
        }
    }

    .e_c_l {
        width: 100%;
        display: flex;
        margin-top: 1vw;

        .eye {
            display: flex;
            align-items: center;
            font-size: 1vw;

            img {
                width: 20%;
            }
        }
    }
}
</style>